<template>
    <!-- 导航 -->
    <el-breadcrumb class="navigation" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>排班管理</el-breadcrumb-item>
        <el-breadcrumb-item>节假日设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="headDivider"></div>
    <!-- 日历 -->
    <el-calendar v-model="date">
        <template v-slot:date-cell="{ date, data }">
            <div @contextmenu.prevent="handleContextmenu(data)">
                <el-row style="height: 85px;">
                    <el-col :span="16">
                        <div class="solar">
                            {{ data.day.split('-')[2] }}
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-tag v-if="holidays.indexOf(data.day) == -1" effect="dark">班</el-tag>
                        <el-tag v-else effect="dark" type="success">休</el-tag>
                    </el-col>
                </el-row>
            </div>
        </template>
    </el-calendar>

    <!-- 弹出框 -->
    <el-dialog v-model="dateDialogVisible" title="节假日设置" style="max-width: 470px">
        <el-form label-width="100px" :model="setHoliday">
            <div class="holiday">
                <el-form-item label="日期" style="width: 240px; margin-left: -30px;">
                    <el-input v-model="setHoliday.theDay" readonly />
                </el-form-item>
                <span>*</span>
                <el-form-item label="类型" style="width: 210px; margin-left: -30px;">
                    <el-radio-group v-model="setHoliday.holidayType">
                        <el-radio :label="1">班</el-radio>
                        <el-radio :label="2">假</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="noHoliday">取消</el-button>
                <el-button type="primary" @click="confirmHoliday">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import holidayRequest from '../../../api/cal-holiday.js';
export default {
    data() {
        return {
            //当前日期
            date: new Date(),
            //编辑节假日的弹窗
            dateDialogVisible: false,
            //节假日设置
            setHoliday: {},
            //查询的节假日
            holidays: [],
        }
    }, methods: {
        /**
         * 添加/修改节假日
         */
        confirmHoliday() {
            holidayRequest.save(this.setHoliday, res => {
                if (res.code == '200') {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    //刷新数据
                    this.loadHoliday();
                    //清空数据
                    this.setHoliday = {};
                    //关闭弹窗
                    this.dateDialogVisible = false;
                }
            })
        },
        /**
         * 取消添加
         */
        noHoliday() {
            //关闭弹窗
            this.dateDialogVisible = false;
            //清空数据
            this.setHoliday = {};
        },
        /**
         * 查询假日
         */
        loadHoliday() {
            holidayRequest.list(res => {
                this.holidays = [];
                res.data.forEach(day => {
                    const dt = new Date(day.theDay);
                    const y = dt.getFullYear();
                    const m = (dt.getMonth() + 1 + '').padStart(2, '0');
                    const d = (dt.getDate() + '').padStart(2, '0');
                    let tiem = y + "-" + m + "-" + d;
                    this.holidays.push(tiem)
                });
            });
        },
        /**
        * 右键事件
        */
        handleContextmenu(data) {
            //右键日期
            this.setHoliday.theDay = data.day;
            //打开弹窗
            this.dateDialogVisible = true;
        }
    }, mounted() {
        this.loadHoliday();
    }
}
</script>



<style scoped>
.headDivider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 15px 0;
    background-color: #dcdfe6;
    position: relative;
}

.holiday {
    margin: 0;
    display: flex;
    /* justify-content: space-between; */
}

.holiday span {
    color: #ff4949;
    line-height: 35px;
    position: relative;
    right: -25px;
}
</style>